
<html>
<head>
    <title>WebSocket Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        #msg {
            border: 1px solid #e2dddd;
        }
        .up2wall {
            position: fixed;
            bottom: 0;
            width: 90%;
        }
        .up2wall input{
            padding: 0.35em 0;
        }
        .textChange_model {
            background: rgba(0,0,0,.5);
            z-index: 402;
            display: none;
            height: 100%;
            width: 100%;
            position: absolute;
        }
        .textChange {
            width: 80%;
            height: 255px;
            background: #FFFFFF;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .textArea {
            width: 100%;
            height: 166px;
            padding: 2%;
        }
    </style>
</head>
<body class="container">
<div class="row">
    在这显示互动内容
</div>
<!--<div class="textChange_model" style="display: block;">-->
    <!--<div class="textChange">-->
        <!--<div class="textArea">-->
            <!--<textarea cols="30" rows="10" class="textInput" placeholder="请输入文字" style="color: rgb(153, 153, 153); background-color: rgb(255, 255, 255); font-size: 13.3333px;"></textarea>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<div class="row" id="msg">

</div>
<div class="row" id="online">

</div>
<br>
<!--<div class="row up2wall">-->
    <!--<input type="text" id="content" class="col-sm-10" style="line-height: 1.42857;vertical-align: middle;"/>-->
    <!--<button type="button" class="btn btn-info col-sm-2">我要上天</button>-->
<!--</div>-->
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
<div id="notifications"></div>
<div id="app">
    {{ message }}
</div>
<div id="app-2">
  <span :title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
<div id="app-5">
    <p>{{ message }}</p>
    <button @click="reverseMessage">逆转消息</button>
</div>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<ol id="app-7">
    <!-- 创建一个 todo-item 组件的实例 -->
    呵呵：）～
    <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
    </todo-item>
    <span v-once>这个将不会改变: {{ msg }}</span>
</ol>
<div id="app8">
    <app-nav></app-nav>
    <app-view>
        <app-sidebar></app-sidebar>
        <app-content></app-content>
    </app-view>
</div>


<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</p>
</div>
<div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button :click="greet">Greet</button>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="//cdn.bootcss.com/sockjs-client/1.1.4/sockjs.js"></script>
<script src="//cdn.bootcss.com/notify.js/3.0.0/notify.min.js"></script>
<script src="../wap/js/vue.js"></script>
<script src="../wap/js/vue-resource.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

<script type="text/javascript">
    $(".btn").click(stompSend);
    var stompClient;
    var stompStatus = false;

    var stompSuccessCallback = function () {
        stompStatus = true;
        console.log('STOMP: Connection successful');
        stompClient.subscribe('/topic/hi/140', function (message) {
            $("#msg").append(message.body+"<br>");
        });
        stompClient.subscribe('/topic/online/140', function (message) {
            $("#online").append(message.body+"<br>");
        });
    };

    var stompFailureCallback = function (error) {
        stompStatus = false;
        console.log('STOMP: ' + error);

        setInterval(stompConnect, 10000);
        console.log('STOMP: Reconecting in 10 seconds');
    };

    function stompConnect() {
        if(stompStatus) return;
        console.log('STOMP: Attempting connection ' + stompStatus);
        if(stompClient){
            stompClient.disconnect();
        }
        var socket = new SockJS('/web-socket');
        stompClient = Stomp.over(socket);
        socket.onheartbeat = function() {
            console.log('heartbeat socket');
        };
        stompClient.connect({login: 'Jap5kVdB', companyId: 140}, stompSuccessCallback, stompFailureCallback);
    }

//    stompConnect();
    function stompSend() {
        stompClient.send("/app/topic/hi/140", { }, JSON.stringify({companyId: 113, msgType: 1, msgContent: 'hello'}));
    }
</script>
<script>
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
    template: '<li>这是个待办项</li>'
})
Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop"，类似于一个自定义属性
    // 这个属性名为 todo。
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleString()
    }
});
var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
});
var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
        ]
    }
})
var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})
var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})
var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其他什么人吃的东西' }
        ],
        msg: "once message"
    },
    created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.groceryList)
    }
})
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
})


var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
    },
    watch: {
        // 如果 `question` 发生改变，这个函数就会运行
        question: function (newQuestion) {
            this.answer = 'Waiting for you to stop typing...'
            this.getAnswer()
        }
    },
    methods: {
        // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
        // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
        // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
        // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
        // 请参考：https://lodash.com/docs#debounce
        getAnswer: _.debounce(
                function () {
                    if (this.question.indexOf('?') === -1) {
                        this.answer = 'Questions usually contain a question mark. ;-)'
                        return
                    }
                    this.answer = 'Thinking...'
                    var vm = this
                    axios.get('https://yesno.wtf/api')
                            .then(function (response) {
                                vm.answer = _.capitalize(response.data.answer)
                            })
                            .catch(function (error) {
                                vm.answer = 'Error! Could not reach the API. ' + error
                            })
                },
                // 这是我们为判定用户停止输入等待的毫秒数
                500
        )
    }
})
</script>
</body>
</html>